交互式网页体验的基础在于对静态 DOM 元素 进行程序化转换，使其变为动态且可响应的节点。这一过程包括捕获原始内容、清除现有状态，并利用正则表达式将逻辑重新注入文档结构中。
1. DOM 节点操作
为了使元素准备好进行交互，使用 textContent 属性来提取节点内的所有文本。通过将其设置为空字符串（node.textContent = ""），我们实际上清空了该节点，为动态内容的重建创建了一个空白画布。
2. 使用正则表达式进行模式匹配
开发者使用带有 全局 选项的正则表达式，以高效地扫描文本中的特定关键词或触发条件。这对于 highlightCode 函数在单个字符串中识别多个语法关键字出现至关重要。
3. 自动化模式部署
扩展交互功能涉及遍历特定标签——通常是 <pre> 元素，带有 data-language 属性——并调用一个转换函数，全局应用样式或行为。这将静态代码片段转化为可读性强、专业的交互式环境。
main.py
TERMINALbash — 80x24
> Ready. Click "Run" to execute.
>
QUESTION 1
Register a key event handler that logs the key codes it gets and press the key you are interested in.
window.addEventListener('keydown', e => console.log(e.keyCode));
document.onKeyPress = function(e) { return e.code; };
node.textContent = event.keyCode;
window.log(e.keyCode);
✅ Correct!
Correct. Registering a 'keydown' listener on the window or document allows you to capture and log the keyCode or key property of every physical press.❌ Incorrect
You must use an event listener and log the event property (like keyCode or key) to the console.QUESTION 2
Why is the 'global' (/g) option required for the keywords regular expression in syntax highlighting?
To ensure it works in all browsers.
To allow the exec() method to find all matches in the text, not just the first one.
To make the regex case-insensitive.
To automatically clear the node's textContent.
✅ Correct!
Correct. The 'global' flag allows the regex object to track its state (lastIndex), enabling a loop to find every occurrence of a keyword.❌ Incorrect
Without the global flag, regex methods will return only the first match or fail to update the search position for the next iteration.QUESTION 3
Which property is used to effectively 'empty' a node before rebuilding its interactive content?
node.innerHTML = null;
node.textContent = '';
node.removeChildren();
node.value = '';
✅ Correct!
Correct. Setting textContent to an empty string removes all children and text content from the node.❌ Incorrect
textContent is the standard, high-performance way to clear a node's existing text state.QUESTION 4
What is the primary purpose of the 'Reset Phase' in the transformation pipeline?
To delete the element from the DOM.
To clear the existing static state so dynamic, styled spans can be injected.
To reset the browser's scroll position.
To clear the regex's lastIndex property.
✅ Correct!
Correct. We clear the raw text to make room for a new tree of text nodes and styled spans.❌ Incorrect
Resetting the content is necessary because we cannot easily style sub-parts of a raw text node without wrapping them in elements.QUESTION 5
How does automated pattern deployment typically identify blocks that need processing?
By checking every single tag in the body.
By looping over elements with specific metadata, such as a data-language attribute.
By waiting for a user to click on the text.
By using the window.onload event to clear the whole page.
✅ Correct!
Correct. Using data-attributes like 'data-language' allows scripts to selectively target specific nodes for transformation.❌ Incorrect
Looping over specific attributes is much more efficient than scanning every node in the document.Case Study: Advanced Interaction Patterns
Implementing Visual Feedback and Input Tracking
You are tasked with creating a highly interactive developer playground. You need to implement a mechanism to track mouse movement for visual flair and a key-logging tool for debugging input event handlers.
Q
1. Implement a mouse trail—a series of images that follow the mouse pointer. Explain the strategy using absolutely positioned div elements.
Solution:
Strategy: 1. Create a fixed number of
Strategy: 1. Create a fixed number of
elements (e.g., 10) with 'position: absolute'. 2. Maintain an index to track the 'current' dot. 3. Add a 'mousemove' listener to the window. 4. On each event, move the current dot to event.pageX/pageY, then increment the index (using modulo to cycle). This reuses elements for efficiency.
Q
2. Provide a code snippet for a mouse trail implementation using 20px blue squares. (Answer must be roughly 32 words).
Solution:
Create 10 divs:
Create 10 divs:
dots.push(document.body.appendChild(document.createElement('div'))). In mousemove: let dot = dots[index]; dot.style.left = event.pageX + 'px'; dot.style.top = event.pageY + 'px'; index = (index + 1) % 10;.